<!--
 * @Date: 2023-03-23 14:18:19
 * @LastEditTime: 2023-03-30 17:44:38
 * @FilePath: /NLK/src/components/common/Cgrid/Cgrid.vue
 * 介绍:
-->
<script lang="ts" setup>
import pickBy from "lodash/pickBy";
const props = withDefaults(
  defineProps<{
    /**gap */
    gap?: string;
    /**row-gap */
    rowGap?: string;
    /**col-gap */
    colGap?: string;
    /**justify-items 默认center */
    justify?: "center" | "baseline" | "start" | "end" | "stretch";
    /**align-items 默认center */
    align?: "center" | "baseline" | "start" | "end" | "stretch";
    /**grid-auto-columns */
    autoCol?: string;
    /**grid-auto-rows */
    autoRow?: string;
    /**grid-auto-flow: 自动排列方式 */
    autoFlow?: "column" | "row";
    /**多少行网格 */
    row?: StrNumber;
    /**多少列网格 */
    col?: StrNumber;
    /**row或col为number情况下css repeat函数的单位,默认:1fr */
    repeat?: string;
  }>(),
  {
    gap: "var(--gap-sm)",
    col: 3,
    repeat: "auto",
    align: "center",
    justify: "center",
  }
);
const gridTemplateColumns = computed(() => {
  const number = Number(props.col);
  if (isNaN(number)) return props.col;
  return repeat(number, props.repeat || "auto");
});
const gridTemplateRows = computed(() => {
  const number = Number(props.row);
  if (isNaN(number)) return number;
  return repeat(number, props.repeat || "auto");
});

function repeat(number: number, symbol: string) {
  return `repeat(${number},${symbol})`;
}
</script>

<template>
  <div
    class="Cgrid"
    :style="
      pickBy({
        gap: props.gap,
        columnGap: props.colGap,
        rowGap: props.rowGap,
        justifyItems: props.justify,
        alignItems: props.align,
        gridAutoColumns: props.autoCol,
        gridAutoRows: props.autoRow,
        gridAutoFlow: props.autoFlow,
        gridTemplateColumns,
        gridTemplateRows,
      })
    "
  >
    <slot></slot>
  </div>
</template>

<style lang="less" scoped>
.Cgrid {
  display: grid;
}
</style>
